<template>
  <div>
    <custom-table
      :columns="columns"
      :query="queryParams"
      :row-btn="rowBtn"
      :show-head-btn="['flush','delete']"
      :show-row-btn="['delete']"
      v-bind="$attrs"
      v-on="listeners"
      @tap-head-btn="onTapHeadBtn"
      @tap-row-btn="onTapRowBtn"
      @row-dblclick="onRowDbClick"
    >
    <template v-slot:star="{row}">
      <el-rate v-model="row.star" disabled></el-rate>
    </template>
    </custom-table>
    <select-repair-user-form
      :visible.sync="repairUserVisible"
      :detail.sync="repairUserDetail"
      @submit="onSubmitRepair"
    >
    </select-repair-user-form>
  </div>

</template>

<script>
import tableMixin from '@/utils/mixin/custom-table'
import SelectRepairUserForm from './selectRepairUserForm'
import { showLoading, hideLoading } from '@/utils'
// import mock from '@/utils/mixin/mock'

// var Mock = require('mockjs')
// import { randomNum } from '@/utils'

export default {
  data() {
    return {
      repairUserVisible: false,
      repairUserDetail: {},
      columns: [
        { name: '位置', field: 'location' },
        // { name: '房号', field: 'room_name', type: 'tag' },
        { name: '报修人', field: 'user_id', type: 'tag', format(col, row) {
          // if (row.user) {
          //   return row.user.real_name
          // } else {
          //   return '是维护员'
          // }
          return row.user ? row.user.real_name : row.RpUser.real_name
        } },
        { name: '报修内容', field: 'content', type: 'tag' },
        { name: '报修图片', field: 'fault_list', type: 'preview', show_overflow_tooltip: false, width: 100, opts: { key: 'link', type: 'img', one: true } },
        { name: '维修人员', field: 'repair_name', type: 'tag' },
        { name: '维修完图片', field: 'complete_list', type: 'preview', show_overflow_tooltip: false, width: 100, opts: { key: 'link', type: 'img', one: true } },
        // { name: '状态', field: 'status', label: true, type: this.checkAuth('change') ? 'switch' : 'tag', opts: {} },
        { name: '评价星级', field: 'star', opts: {} },
        { name: '评价内容', field: 'rate_content', opts: {} },
        { name: '状态', field: 'status', type: 'tag', label: true, opts: {} },
        { name: '添加时间', field: 'create_time' }
      ],
      select_id: ''
    }
  },
  components: {
    SelectRepairUserForm
  },
  mixins: [
    tableMixin
    // mock
  ],
  computed: {
    rowBtn() {
      return [
        {
          name: '维修指派',
          key: 'repair',
          // confirm: '确认进行维修指派？',
          // input: 'textarea',
          // placeholder: '请输入跟进备注',
          show(row) {
            // console.log('你好野', row)
            return row.status_desc === '待处理'
          }
        },
        {
          name: '通知',
          key: 'share',
          confirm: '确认进行通知报修人？',
          show(row) {
            return row.status_desc === '已处理'
          }
        }
      ]
    }
  },
  props: {},
  filters: {},
  created() {
  },
  methods: {
    /*
    onLoad() {
      Mock.Random.extend({
        buildingName(data) {
          return this.pick(['A栋', 'B栋', 'C栋', 'D栋']) + randomNum(1, 999).toString().padStart(3, '0')
        },
        status() {
          return this.pick(['待处理', '处理中', '已处理'])
        },
        content() {
          return this.pick(['水龙头坏了', '空调坏了', '洗衣机坏了', 'wifi坏了', '热水器坏了'])
        }
      })
      var data = Mock.mock({
        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
        'list|20': [{
          // 属性 id 是一个自增数，起始值为 1，每次增 1
          'id|+1': 1,
          'number|1-999': 1,
          'nickname': '@cname',
          'content': '@content',
          'create_time': '@now',
          'status': '@status',
          'name': '@buildingname'
        }]
      })

      console.log('mock', data)

      this.setMockData(data)
    },
    */
    onTapRowBtnRepair(row) {
      this.select_id = row.id
      this.repairUserVisible = true
      console.log('我被点击了', row)
    },
    onSubmitRepair(detail) {
      var id = this.select_id
      // detail.push({ id: id })
      detail['id'] = id
      console.log('我被提交了', detail)
      showLoading('分配中...')
      this.curd.post('allotRepair', detail).then(res => {
        hideLoading()
        this.repairUserVisible = false
        this.onTapHeadBtnFlush({})
      }, hideLoading)
      // this.onTapHeadBtnFlush({})
    }
  }
}
</script>

<style lang="scss">

</style>
